<template>
	<div class="bond">
		<el-card class="box-card">
			<div class="header">
				<div style="display: flex;flex-direction: column;padding-right:25px;">
					<h3 :style="{'color':status==0?'red':'#017EFF'}">您{{STATUS[status]}}保证金</h3>
					<p style="padding-top: 10px;">糖果保证金是约束商家恪守诚信经营行为，为消费者提供一个安全放心的消费环境，如果商家出现商品质量或者服务
						售后问题、商品和描述不符、协商不协调，甚至欺骗消费者，经平台核实后是商家的问题、那么商家必须无条件退还消 费款、甚至赔偿等，如商家严重违约，系统将会扣除商家糖果保证金部分或全部赔偿给消费者。
					</p>
				</div>
				<div>
					<el-image :src="src" style="height:107px;width: 107px;"></el-image>
				</div>
			</div>
			<div style="padding:15px;font-weight: bold;">
				<span>您{{JIAONASTATUS[status]}}保证金：</span>
				<span :style="{'color':status==0?'red':'#017EFF'}">{{status==0?systemSweet:bondPrice}}颗</span>
				<p v-if="merchantBondReturnVO&&merchantBondReturnVO.examine==2" style="padding:5px 0;">申请结果：<span style="color: red;">失败</span></p>
				<p v-if="merchantBondReturnVO&&merchantBondReturnVO.examine==2">拒绝原因：<span style="color: red;">{{merchantBondReturnVO&&merchantBondReturnVO.examine==2?merchantBondReturnVO.msg:''}}</span></p>
			</div>
			<div class="footer" v-if="status==0">
				<el-button type="primary" style="width: 240px;" @click="goGet">立即缴纳</el-button>
			</div>
			<div class="footer" v-if="sweetPayNotOnly>0">
				<el-button type="primary" style="width: 240px;" @click="bondPayNotOnly">补缴保证金</el-button>
			</div>
			<div class="footer" v-else-if="status==1">
				<el-button :type="applyReturn==1?'info':'primary'" :disabled="applyReturn==1" style="width: 240px;" @click="exit">{{applyReturn==1?'待审核':'申请退还'}}</el-button>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				src: require('@/assets/baozhang.png'),
				status: 1,
				STATUS: {
					0: '还未缴纳',
					1: '已缴纳'
				},
				JIAONASTATUS:{
					0:'需缴纳',
					1:'已缴纳'
				},
				examine: {
					0: '待审核',
					1: '审核通过',
					2: '审核不通过'
				},
				bondPrice: 0,
				systemSweet:0,
				applyReturn: '',
				merchantBondReturnVO: {},
				sweetPayNotOnly: 0
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				this.$http.get(this.$api.getMerchantBond).then(res => {
					if (res.code == 0) {
						this.status = res.data.status;
						this.bondPrice = res.data.sweet;
						this.systemSweet = res.data.systemSweet;
						this.applyReturn = res.data.applyReturn;
						this.merchantBondReturnVO = res.data.merchantBondReturnVO;
						this.sweetPayNotOnly = res.data.sweetPayNotOnly // 补交金额
					}
				})
			},
			//保证金退回
			exit() {
				this.$prompt('申请退回保证金原因', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$http.post(this.$api.bondRecordApply, {
						msg: value
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '申请成功！'
							});
							this.getData();
						} else {
							this.$message({
								type: 'success',
								message: res.msg
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消保证金退回'
					});
				});
			},
			//前往缴纳
			goGet() {
				this.$prompt('请输入你的支付密码', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$http.post(this.$api.bondPay, {
						"password": this.$md5(value.trim())
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '保证金缴纳成功！'
							});
							this.getData();
						} else {
							this.$message({
								type: 'success',
								message: res.msg
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消保证金缴纳'
					});
				});
			},
			bondPayNotOnly(){
				this.$prompt('请输入你的交易密码', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$http.post(this.$api.bondPayNotOnly, {
						"password": this.$md5(value.trim())
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '保证金缴纳成功！'
							});
							this.getData();
						} else {
							this.$message({
								type: 'success',
								message: res.msg
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消保证金缴纳'
					});
				});
			},
		}
	}
</script>

<style scoped>
	.bond {
		width: 100%;
		height: calc(100vh - 60px);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
	}

	.header {
		display: flex;
		justify-content: center;
		position: relative;
		background-color: #DBEBFC;
		padding: 15px;
	}

	.box-card {
		width: 100%;
		height: 100%;
		position: relative;
	}

	>>>.el-card__body {
		padding: 0;
	}

	.cardcontent {
		height: 140px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30px;
		color: red;
		font-weight: bold;
	}

	.footer {
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 40px;
		right: 0;
		left: 0;
	}
</style>
